import { useEffect, useRef } from "react";
import { init, graphic } from "echarts";
import classNames from "classnames";

interface Props {
  className?: string;
  title?: string;
  data: Array<unkown>;
}

export default function RotationSpeed<Props>(props: Props) {
  const domRef = useRef(null);

  const initChart = () => {
    const chart = init(domRef.current, "purple");
    chart.setOption({
      title: {
        text: props.title,
      },
      series: [
        {
          type: "gauge",
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 240,
          splitNumber: 12,
          itemStyle: {
            color: "#58D9F9",
            shadowColor: "rgba(0,138,255,0.45)",
            shadowBlur: 10,
            shadowOffsetX: 2,
            shadowOffsetY: 2,
          },
          progress: {
            show: true,
            roundCap: true,
            width: 6,
          },
          pointer: {
            icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
            length: "75%",
            width: 6,
            offsetCenter: [0, "5%"],
          },
          axisLine: {
            roundCap: true,
            lineStyle: {
              width: 6,
            },
          },
          axisTick: {
            distance: 3,
            splitNumber: 2,
            lineStyle: {
              width: 1,
              color: "#999",
            },
          },
          splitLine: {
            distance: 3,
            length: 8,
            lineStyle: {
              width: 2,
              color: "#999",
            },
          },
          axisLabel: {
            distance: 6,
            color: "#999",
            fontSize: 10,
          },
          title: {
            show: false,
          },
          detail: {
            backgroundColor: "#fff",
            borderColor: "#999",
            borderWidth: 2,
            width: "60%",
            lineHeight: 25,
            height: 20,
            borderRadius: 8,
            offsetCenter: [0, "35%"],
            valueAnimation: true,
            formatter: function (value) {
              return "{value|" + value.toFixed(0) + "}{unit|km/h}";
            },
            rich: {
              value: {
                fontSize: 18,
                fontWeight: "bolder",
                color: "#777",
              },
              unit: {
                fontSize: 15,
                color: "#999",
                padding: [0, 0, 0, 5],
              },
            },
          },
          data: props.data,
        },
      ],
    });
  };

  const className = classNames("size-full", props.className);

  useEffect(() => {
    initChart();
  }, []);
  return <div ref={domRef} className={className}></div>;
}
